<template>
  <a-form class="form" :model="formData">
    <template v-for="(module, index) in formData" :key="index">
      <a-form-item class="itemTitle">
        <div class="title">{{ numberToChinese(index + 1) + '、' + module.name }}</div>
      </a-form-item>
      <template v-for="(subitem, i) in module.list" :key="i">
        <a-form-item class="subitemName">
          <span
            >{{ i + 1 + '. ' + subitem.questionName
            }}<span>{{
              subitem.questionType.includes('单选')
                ? '（单选）'
                : subitem.questionType.includes('多选')
                  ? '（多选）'
                  : ''
            }}</span></span
          >
        </a-form-item>
        <template v-if="subitem.questionType.includes('单选')">
          <a-form-item class="subitemName">
            <a-row :gutter="[48, 8]">
              <template v-for="(option, s) in subitem.options" :key="s">
                <a-col>
                  <a-space>
                    <a-radio
                      :checked="subitem.value === option.value"
                      @change="() => (subitem.value = option.value)"
                      :disabled="disabled"
                      >{{ option.value }}</a-radio
                    >
                    <a-tooltip v-if="option.input" :title="subitem.inputText">
                      <a-input
                        v-if="option.input"
                        style="width: 210px"
                        v-model:value="subitem.inputText"
                        @input="
                          () => {
                            subitem.value = option.value
                          }
                        "
                        :disabled="disabled"
                        autocomplete="off"
                        :maxlength="option.maxlength"
                        placeholder=""
                      />
                    </a-tooltip>
                  </a-space>
                </a-col>
              </template>
            </a-row>
          </a-form-item>
        </template>
        <template v-else-if="subitem.questionType.includes('多选')">
          <a-form-item class="subitemNameCheckbox">
            <a-row :gutter="[48, 8]">
              <template v-for="(option, s) in subitem.options" :key="s">
                <a-col>
                  <a-space>
                    <a-checkbox
                      :checked="subitem.value.includes(option.value)"
                      @change="multipleChange($event, option.value, subitem)"
                      :disabled="disabled"
                      >{{ option.value }}</a-checkbox
                    >
                    <a-tooltip v-if="option.input" :title="subitem.inputText">
                      <a-input
                        v-if="option.input"
                        style="width: 210px"
                        v-model:value="subitem.inputText"
                        @input="
                          () => {
                            subitem.value = Array.from(new Set(subitem.value).add(option.value))
                          }
                        "
                        :disabled="disabled"
                        autocomplete="off"
                        :maxlength="option.maxlength"
                        placeholder=""
                      />
                    </a-tooltip>
                  </a-space>
                </a-col>
              </template>
            </a-row>
          </a-form-item>
        </template>
        <template v-else>
          <a-form-item class="subitemNameCheckbox">
            <a-textarea
              style="width: 50%; padding: 9px 16px"
              v-model:value="subitem.inputText"
              :disabled="disabled"
              placeholder="请输入你的回答"
              :maxlength="500"
              autoSize
            />

            <template v-if="subitem.exc">
              <span class="unit">{{ subitem.exc.unit }}</span>
            </template>
          </a-form-item>
        </template>
      </template>
    </template>
  </a-form>
</template>

<script setup lang="ts">
import { numberToChinese } from '@/utils/tools'

const multipleChange = (e, val, item) => {
  console.log(e.target.checked)
  if (e.target.checked) {
    if (item.value.includes(val)) {
      return
    } else {
      item.value.push(val)
    }
  } else {
    const i = item.value.findIndex((v) => {
      return v === val
    })
    if (i > -1) {
      item.value.splice(i, 1)
    } else {
      return
    }
  }
}

const props = defineProps(['formData', 'disabled'])
const emit = defineEmits(['update:formData', 'reset'])
</script>

<style lang="less" scope>
.ant-form-item {
  &.itemTitle {
    margin: 10px 0;

    .title {
      height: 32px;
      padding-left: 16px;
      font-size: 14px;
      font-weight: 600;
      line-height: 32px;
    }
  }

  &.subitemName {
    margin-bottom: 0;
  }

  &.subitemNameCheckbox {
    margin-bottom: 0;
  }
}

html[theme='light'] {
  .ant-form-item {
    font-size: 14px;

    &.itemTitle {
      background: #f7f8fa;

      .title {
        color: #1d2129;
      }
    }
  }
}

.red {
  color: #ff1313;
}

.form {
  .ant-radio-wrapper-disabled,
  .ant-input-disabled,
  .ant-input[disabled],
  .ant-checkbox-disabled + span {
    color: #1d2129;
  }

  .ant-radio-wrapper .ant-radio-disabled .ant-radio-inner::after {
    color: #1d2129;
  }

  .ant-checkbox-checked.ant-checkbox-disabled .ant-checkbox-inner {
    background: #94bfff;
  }

  .ant-checkbox-disabled .ant-checkbox-inner::after {
    border-color: #fff;
  }

  .ant-radio-wrapper .ant-radio-checked.ant-radio-disabled .ant-radio-inner {
    background: #94bfff;
  }

  .ant-radio-wrapper .ant-radio-disabled.ant-radio-checked .ant-radio-inner::after {
    background-color: #fff;
  }

  .ant-picker .ant-picker-input > input-disabled,
  .ant-picker .ant-picker-input > input[disabled] {
    color: #1d2129;
  }

  .unit {
    margin-left: 8px;
  }
}
</style>
